export const useSwiper = (list) => {
  const state = reactive({
    now_idx: 0,
    swiper: null,
    bannerList: list,
  })
  const onSlideChange = (e) => {
    state.now_idx = e.realIndex
  }
  const onSwiper = (swiper) => {
    state.swiper = swiper
  }

  const slideTo = (v) => {
    state.swiper.slideTo(v)
    state.now_idx = v
  }
  const slideNext = () => {
    const { bannerList, now_idx } = state
    if (now_idx >= bannerList.length - 1) {
      slideTo(0)
      return
    }
    slideTo(state.now_idx + 1)
  }

  const slidePrev = () => {
    const { now_idx, bannerList } = state
    if (now_idx <= 0) {
      slideTo(bannerList.length - 1)
      return
    }
    slideTo(state.now_idx - 1)
  }

  return {
    state,
    onSlideChange,
    onSwiper,
    slideTo,
    slideNext,
    slidePrev,
  }
}
